<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #000;
            margin: 0;
            overflow: hidden;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="1400" height="600"></canvas>
    <script>
        var canvas = document.getElementById("canvas");

        const mobile = (navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/BlackBerry/i)
            || navigator.userAgent.match(/Windows Phone/i)
        );

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Initialize the GL context
        var gl = canvas.getContext('webgl');
        if (!gl) {
            console.error("Unable to initialize WebGL.");
        }

        var layers_ = 3;

        if (mobile) {
            layers_ = 6;
        }

        //Time step
        var dt = 0.015;
        //Time
        var time = 0.0;

        //************** Shader sources **************

        var vertexSource = `

attribute vec2 position;
void main() {
	gl_Position = vec4(position, 0.0, 1.0);
}
`;

        var fragmentSource = `
precision highp float;

uniform float width;
uniform float height;
vec2 resolution = vec2(width, height);

uniform float time;
float random(vec2 par){
   return fract(sin(dot(par.xy,vec2(12.9898,78.233))) * 43758.5453);
}

vec2 random2(vec2 par){
	float rand = random(par);
	return vec2(rand, random(par+rand));
}

//https://www.shadertoy.com/view/3s3GDn
float getGlow(float dist, float radius, float intensity){
    return pow(radius/dist, intensity);
}

void main(){
	
	float t = 1.0 + time * 0.05;
  const float layers = float(`+ layers_ + `);
  float scale = 32.0;
  float depth;
  float phase;
  float rotationAngle = time * -0.1;
  float size;
  float glow;
  //Iteration step size for outermost loop
  const float del = 1.0/layers;
    
  vec2 uv;
  //Value of floor(uv)
  vec2 fl;
  vec2 local_uv;
  vec2 index;
  vec2 pos;
  //Seed for random values
  vec2 seed;
  vec2 centre;    
  //The indices of 3x3 cells surrounding the fragment
  vec2 cell;
  //To move the focus of the camera in a circle
  vec2 rot = vec2(cos(t), sin(t));
    
  //To rotate layers
  mat2 rotation = mat2(cos(rotationAngle), -sin(rotationAngle), 
                         sin(rotationAngle),  cos(rotationAngle));
 	vec3 col = vec3(0);
  vec3 tone;
    
  //For all layers
  for(float i = 0.0; i <= 1.0; i+=del){
  	//Find depth from layer index and move it in time
    depth = fract(i + t);
        
    //Move centre in a circle depending on the depth of the layer
    centre = rot * 0.2 * depth + 0.5;
        
    //Get uv from the fragment coordinates, rotation and depth
   	uv = centre-gl_FragCoord.xy/resolution.x;
    uv *= rotation;
   	uv *= mix(scale, 0.0, depth);
    fl = floor(uv);
    //The local cell coordinates. uv-fl == frac(uv)
    local_uv = uv - fl - 0.5;

        
    //For a 3x3 group of cells around the fragment, find the 
		//distance from the points of each to the current fragment 
		//and draw an accumulative glow accordingly
    for(float j = -1.0; j <= 1.0; j++){
    	for(float k = -1.0; k <= 1.0; k++){
     		cell = vec2(j,k);
            
        index = fl + cell;
        
        //Cell seed
       	seed = 128.0 * i + index;
                
        //Get a random position in relation to the considered cell
        pos = cell + 0.9 * (random2(seed) - 0.5);
        
        //Get a random phase
        phase = 128.0 * random(seed);
        //Get colour from cell information
        tone = vec3(random(seed), random(seed + 1.0), random(seed + 2.0));
        
        //Get distance to the generated point, fade distant points
        //and make glow radius pulse in time
        size = (0.1 + 0.5 + 0.5 * sin(phase * t)) * depth;
        glow = size * getGlow(length(local_uv-pos), 0.09, 2.0);
        //Add white core and glow
        col += 5.0 * vec3(0.02 * glow) + tone * glow;
    	}
  	}
	}
    
  //Tone mapping
  col = 1.0 - exp(-col);
    
  //Output to screen
	gl_FragColor = vec4(col,1.0);
}
`;

        //************** Utility functions **************

        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            gl.viewport(0, 0, canvas.width, canvas.height);
            gl.uniform1f(widthHandle, window.innerWidth);
            gl.uniform1f(heightHandle, window.innerHeight);
        }


        //Compile shader and combine with source
        function compileShader(shaderSource, shaderType) {
            var shader = gl.createShader(shaderType);
            gl.shaderSource(shader, shaderSource);
            gl.compileShader(shader);
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
            }
            return shader;
        }

        //From https://codepen.io/jlfwong/pen/GqmroZ
        //Utility to complain loudly if we fail to find the attribute/uniform
        function getAttribLocation(program, name) {
            var attributeLocation = gl.getAttribLocation(program, name);
            if (attributeLocation === -1) {
                throw 'Cannot find attribute ' + name + '.';
            }
            return attributeLocation;
        }

        function getUniformLocation(program, name) {
            var attributeLocation = gl.getUniformLocation(program, name);
            if (attributeLocation === -1) {
                throw 'Cannot find uniform ' + name + '.';
            }
            return attributeLocation;
        }

        //************** Create shaders **************

        //Create vertex and fragment shaders
        var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
        var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);

        //Create shader programs
        var program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);

        gl.useProgram(program);

        //Set up rectangle covering entire canvas 
        var vertexData = new Float32Array([
            -1.0, 1.0, 	// top left
            -1.0, -1.0, 	// bottom left
            1.0, 1.0, 	// top right
            1.0, -1.0, 	// bottom right
        ]);

        //Create vertex buffer
        var vertexDataBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

        // Layout of our data in the vertex buffer
        var positionHandle = getAttribLocation(program, 'position');

        gl.enableVertexAttribArray(positionHandle);
        gl.vertexAttribPointer(positionHandle,
            2, 				// position is a vec2 (2 values per component)
            gl.FLOAT, // each component is a float
            false, 		// don't normalize values
            2 * 4, 		// two 4 byte float components per vertex (32 bit float is 4 bytes)
            0 				// how many bytes inside the buffer to start from
        );

        //Set uniform handle
        var timeHandle = getUniformLocation(program, 'time');
        var widthHandle = getUniformLocation(program, 'width');
        var heightHandle = getUniformLocation(program, 'height');

        gl.uniform1f(widthHandle, window.innerWidth);
        gl.uniform1f(heightHandle, window.innerHeight);

        function draw() {
            //Update time
            time += dt;

            //Send uniforms to program
            gl.uniform1f(timeHandle, time);
            //Draw a triangle strip connecting vertices 0-4
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

            requestAnimationFrame(draw);
        }

        draw();
    </script>
</body>

</html>